<template>
  <div class="refresh-loadmore">
    <pull-refresh v-model="refreshing" @refresh="onRefresh">
      <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <slot name="list"></slot>
      </list>
    </pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, List } from "vant";

export default {
  components: {
    PullRefresh,
    List
  },
  data() {
    return {
      count: 0,
      refreshing: false,
      loading: false,
      finished: false
    };
  },
  props: {
    isRefreshing: {
      type: Boolean,
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false
    },
    isFinished: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isRefreshing(newVal) {
      if (!newVal) {
        console.log("刷新完毕");
        this.refreshing = false;
        this.finished = false;
        this.loading = false;
      }else{
        this.refreshing = true;
        this.loading = true;
      }
    },
    isLoading(newVal) {
      if (!newVal) {
        console.log("加载完毕");
        this.loading = false;
      }
    },
    isFinished(newVal){
      if (newVal) {
        console.log("没有更多");
        // this.loading = false
        this.finished = true;
      }else{
        this.finished = false;
      }
    }
  },
  methods: {
    onLoad() {
      this.$emit("onLoad");
    },
    onRefresh() {
      this.$emit("onRefresh");
    }
  }
};
</script>